<template>
  <div class="export-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="1100px"
        :clickModalClose="true"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <!-- 标题部分增加背景色和内边距 -->
      <div class="popup-header">
        <div style="text-align: center; font-size: 24px; font-weight: bold">导出清单</div>
      </div>
      <el-tabs class="custom-tabs">
        <el-tab-pane label="合同信息">
          <div class="checkbox-group-container">
            <el-checkbox-group v-model="form.checkList">
              <el-checkbox v-for="(item, index) in contractInfoOptions" :key="index" :label="item"></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-tab-pane>
        <el-tab-pane label="跟进信息">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox v-for="(item, index) in followInfoOptions" :key="index" :label="item"></el-checkbox>
          </el-checkbox-group>
        </el-tab-pane>
        <el-tab-pane label="其他信息">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox v-for="(item, index) in otherInfoOptions" :key="index" :label="item"></el-checkbox>
          </el-checkbox-group>
        </el-tab-pane>
        <el-tab-pane label="流程记录">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox v-for="(item, index) in processRecordOptions" :key="index" :label="item"></el-checkbox>
          </el-checkbox-group>
        </el-tab-pane>
        <el-tab-pane label="案件信息">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox v-for="(item, index) in caseInfoOptions" :key="index" :label="item"></el-checkbox>
          </el-checkbox-group>
        </el-tab-pane>
      </el-tabs>
      <div style="text-align: center; margin-top: 20px;">
        <div class="dialog-footer">
          <el-button @click="getAll()">全选</el-button>
          <el-button @click="setAll()">全不选</el-button>
        </div>
      </div>
    </popup>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { caseEdit, caseAdd, caseDetail } from '@/api/case'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
import annexData from './clientFile/annexData.vue'
const fileEditRef = shallowRef<InstanceType<typeof annexData>>()
const dialogFormVisible = ref(false)
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('export')
const popupTitle = computed(() => {
  return mode.value == '导出清单'
})

// 定义各个选项卡的复选框选项
const contractInfoOptions = [
  '合同编号', '合同名称', '客户名称', '客户代码', '省份',
  '城市', '乙方签约公司', '合同金额', '案例数量', '签约日期',
  '业务人员', '合同类型', '官费', '代理费', '收款日期',
  '收款金额', '合同开始时间', '合同结束时间', '我方签约的人',
  '备注', '甲方签约的人', '甲方签约人电话', '回款时间', '回款金额',
  '回款公司账户', '合同官费总额', '合同代理费总额'
]
const followInfoOptions = ['当前状态', '当前办理人', '重要程度', '所属分部', '收款账户']
const otherInfoOptions = ['创建人', '协作人']
const processRecordOptions = ['最后办理时间', '流程状态']
const caseInfoOptions = ['案件总代理费', '是否开卷']

// 合并所有复选框选项
const allOptions = [
  ...contractInfoOptions,
  ...followInfoOptions,
  ...otherInfoOptions,
  ...processRecordOptions,
  ...caseInfoOptions
];

const form = reactive({
  checkList: allOptions // 初始化为包含所有选项的数组，实现默认全选的状态
})
const activeName = 'first'

// 确认导出
const handleSubmit = async () => {
  // 获取并输出选中的内容
  const selectedContent = form.checkList;
  console.log('所选中的内容:', selectedContent);

  // 这里可以继续添加原有的提交逻辑，比如调用 API 等
  // 目前示例中仅输出选中内容
}

const open = (type = 'export') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
  // for (const key in formData) {
  //   if (data[key] != null && data[key] != undefined) {
  //     //@ts-ignore
  //     formData[key] = data[key]
  //   }
  // }
}

// 全选方法
const getAll = () => {
  const allOptions = [
    ...contractInfoOptions,
    ...followInfoOptions,
    ...otherInfoOptions,
    ...processRecordOptions,
    ...caseInfoOptions
  ];
  form.checkList = allOptions;
};

// 全不选方法
const setAll = () => {
  form.checkList = [];
};

// 取消操作
const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData
})
</script>

<style scoped>
.export-popup {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-tabs {
  padding: 20px;
}

.checkbox-group-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.checkbox-group-container el-checkbox {
  margin: 5px 10px;
  min-width: 120px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.el-button {
  padding: 8px 16px;
  border-radius: 5px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}
</style>